<template>
<div class="xheader-all">
    <div class="xheader haps">
        <div class="logo">
            <a href="/" class="logo"><img :src="$config('logo.nomal')" height="36"  class="img"></a>
        </div>
        <div class="nav">
            <ul>
                <li v-if="cates"><a href="javascript:void(0);" class="f18">首页<i></i></a></li>
                <li v-if="cates"><a href="javascript:void(0)">
                    <el-dropdown @command="clickCateCommand" placement="bottom">
                      <el-button type="text" class="f18 font-gray">
                        分类&nbsp;&nbsp;<i class="el-icon-arrow-down el-icon--right"></i>
                      </el-button>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item  :command="'cate-'+item.id"  v-for="(item, index) in cates" :key="index">
                          <i :class="item.icon + ' f14'" ></i>&nbsp; {{item.name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>&nbsp;&nbsp;
                </a></li>
            </ul>
        </div>
        <div class="center"  v-if="insearch">
            <el-input placeholder="请输入内容" v-model="keyword" class="input-with-search">
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </div>
        <div class="right">
            <ul v-if="isLogin">                
                <li><a href="javascript:void(0)" @click.stop="signOut" class="f14">退出</a></li>
                <li><a href="/admin" class="f14">管理</a></li>
                <li><a href="/console"><span  class="ybtn ybtn-blue f14">控制台</span></a></li>
                <li><a href="/console" class="f14">{{ userinfo.uname }}</a></li>
            </ul>
            <ul v-else>                
                <li v-if="inreg"><router-link :to="{name: 'register'}" class="font-blue f14">注册</router-link></li>
                <li v-if="inlogin"><router-link :to="{name: 'login'}" class="font-blue f14">登录</router-link></li>
            </ul>
        </div>
        <div class="cl"></div>
    </div>    
</div>
</template>
<script>
  import { mapGetters, mapActions } from 'vuex'
  import {cacheConfig} from "@cache"
  export default {
    props: ['cates', 'insearch', 'inlogin', 'inreg'],
    data () {
      return {
        keyword: ''
      }
    },
    computed: {
      ...mapGetters([
        'isLogin',
        'tokenError',
        'userinfo'
      ])
    },
    mounted: function () {
    },
    methods: {
      ...mapActions(['signOut']),
      clickCateCommand () {

      }
    }
  }
</script>
<style lang="scss">
.xheader-all {background: #fff;height: 68px;line-height: 52px;min-width: 1200px;border-bottom: 1px solid #e1e6f0;}
.haps {width: 98%;margin:0 auto;}
.xheader-all .xheader {}
.xheader-all .xheader .logo {float: left; margin-right: 70px;}
.xheader-all .xheader .logo a {display: inline-block; margin-right: 12px;}
.xheader-all .xheader .nav {float: left;}
.xheader-all .xheader .nav ul li {float: left;margin-right: 20px;}
.xheader-all .xheader .nav ul li a {display: block;padding: 0 3px;height: 58px;line-height: 58px;position:relative; margin-right:20px;}
.xheader-all .xheader .nav ul li a.cur:after {content: "";width: 100%;position: absolute;left: 0; bottom: 7px; height: 3px; background-color: #ff6f02;} 
.input-with-search {width: 360px;}
.xheader-all .xheader .center {float:left;margin-left:230px;padding-top:7px;}
.xheader-all .xheader .right {float: right;height: 58px;overflow: hidden;}
.xheader-all .xheader .right ul li {float:right;}
.xheader-all .xheader .right ul li a {display:inline-block;padding: 0 20px;height: 58px;line-height: 58px; font-size:12px; position:relative;}

</style>
